<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>


<link rel="stylesheet" href="${ctx}/static/plugins/zTree/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/jqwidgets/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/jqwidgets/jqwidgets/styles/jqx.darkblue.css" />
<%-- 
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/bootstrap/extra_easyui.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/panel.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/datagrid.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/pagination.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/easyui/themes/default/tree.css" />
 --%>
 
<title>系统资源管理</title>

<div class="page-header">
	<h1>
		系统资源树列表 
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<button class="btn btn-purple btn-xs height-30" onclick="oSearch();">
					<i class="ace-icon fa fa-search"></i>
					搜索
				</button>
				<button class="btn btn-pink btn-xs height-30" onclick="resetSearch();">
					<i class="ace-icon fa fa-share bigger-100"></i>
					重置
				</button>
				<button class="btn btn-success btn-xs height-30" onclick="oTable.ajax.reload();">
					<i class="ace-icon fa fa-search"></i>
					刷新
				</button>
			</div>
		</div>
		<div class="space-2"></div>
	
		<div class="row">
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-6">
						<ul id="tree1" class="ztree"></ul>
					</div>
					<div class="col-xs-6">
						<ul id="tree2" class="ztree"></ul>
					</div>
				</div>
	
				<div class="row">
					<div class="col-xs-6">
						<input id="resourceSel" type="text" readonly value="" style="width:180px;" onclick="showMenu();" />
						<div id="menuContent" class="menuContent" style="display:none; position: absolute;"> 
							<ul id="tree3" class="ztree sel" style="margin-top:0; width:180px; height: 200px;"></ul>
						</div>
					</div>
					<div class="col-xs-6">
						<input type="button" value="Click Me" id='myButton' />
					</div>
				</div>
	
				<div class="row">
					<div class="col-xs-12">
						<div id="treeGrid"></div>
					</div>
				</div>
	
			</div>
		</div>
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<script type="text/javascript">
var scripts = [null, 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.core-3.5.js", 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.excheck-3.5.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxcore.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxbuttons.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxdata.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxscrollbar.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxdatatable.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxtreegrid.js", 
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		
		$("#myButton").jqxButton({
			width: '120px', height: '35px', theme: 'darkblue'
		});
		
		$("#myButton").click(function() {
			
			//$("#treeGrid").jqxTreeGrid('render');
			 var selection = $("#treeGrid").jqxTreeGrid('getSelection');
			    for (var i = 0; i < selection.length; i++) {
			        // get a selected row.
			    	var rowData = selection[i];
			    	console.info(rowData) ;
			    }
		});
		$('#treeGrid').on('rowClick', 
		function (event)
		{
		    // event args.
		    var args = event.args;
		    // row data.
		    var row = args.row;
		    // row key.
		    var key = args.key;
		    // data field
		    var dataField = args.dataField;
		    // original click event.
		    var clickEvent = args.originalEvent;
		    console.info(args) ;
		    console.info(row) ;
		    console.info(key) ;
		    console.info(dataField) ;
		    console.info(clickEvent) ;
		    console.info() ;
		    
		});
         var source =
         {
             dataType: "json",
             dataFields: [
                 { name: 'id', type: 'number' },
                 { name: 'pid', type: 'number' },
                 { name: 'name', type: 'string' },
                 { name: 'children', type: 'array' },
             ],
             hierarchy:
             {
                 keyDataField: { name: 'id' },
                 parentDataField: { name: 'pid' }
             },
             id: 'id',
             url: "${ctx}/admin/sys/resource/allList",
         };
         var dataAdapter = new $.jqx.dataAdapter(source);
         $("#treeGrid").jqxTreeGrid(
         {
             width: "full",
             autoRowHeight: true,
             checkboxes: true,
             sortable: true,
             columnsHeight: 70,
             source: dataAdapter,
             ready: function () {
                 $("#treeGrid").jqxTreeGrid('expandRow', '6');
             },
             columns: [
               { text: 'id', dataField: 'id', width: 100, height:140 },
               { text: 'name', dataField: 'name' },
               { text: 'pid', dataField: 'pid' }
             ]
         });
		
		
		
		
		
		
		
		
		
		var t1 = $("#tree1");
		$.get("${ctx}/admin/sys/resource/tree", function(result) {
			$.fn.zTree.init(t1, {}, result);
		},"JSON") ;
		
		
		var setting2 = {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable:true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: ""
					}
				}
		};
		var t2 = $("#tree2");
		$.get("${ctx}/admin/sys/resource/allList", function(result) {
			$.fn.zTree.init(t2, setting2, result);
		},"JSON") ;
		
		
		var t3 = $("#tree3");
		$.get("${ctx}/admin/sys/resource/allList", function(result) {
			$.fn.zTree.init(t3, setting2, result);
		},"JSON") ;
		
	});
});

function showMenu() {
	var sel = $("#resourceSel") ;
	
	$("#menuContent").css({"top": sel.outerHeight()-1+"px"}).slideDown("fast");

	$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn" || event.target.id == "resourceSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
		hideMenu();
	}
}

</script>


